<template>
<div style="margin-left: 10px">

  <div style="display: flex; justify-content: space-between;overflow: hidden">
    <div style="min-width: 300px;margin: 10px">
      <div>
        <h3 class="el-icon-s-flag"  style="">塔机基本信息</h3>
        <div class="block">
          <el-image :src="require('@/pictures/P-C.png')" style="width: 250px;height: 300px;margin-left: 50px"></el-image>
        </div>
      </div>
    </div>
    <div style="min-width: 300px;margin: 10px">
      <div >

        <el-descriptions title="时刻风速" direction="vertical" :column="3" border>
          <el-descriptions-item label="获取时间">17:00</el-descriptions-item>
          <el-descriptions-item label="风级">
            <el-tag size="small">4级</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <div id="biaoChar" style="width: 300px; height: 250px;"></div>
      </div>
    </div>
    <div style="min-width: 300px;margin: 10px">

      <el-descriptions title="司机信息" direction="vertical"
                       :column="4" border>
        <el-descriptions-item label="姓名" prop="driver">李四</el-descriptions-item>
        <el-descriptions-item label="手机号" prop="telPhone">123456789</el-descriptions-item>
        <el-descriptions-item label="年龄" prop="age" :span="2">35</el-descriptions-item>
        <el-descriptions-item label="状态"  prop="status">
          <el-tag size="small">施工中</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址" prop="place">福建省厦门市</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>

  <el-row>
    <el-col :span="24">
      <el-table
          :data="permissionRelations"
          border
          style="width: 100%">
        <el-table-column prop="weight" label="载重" ></el-table-column>
        <el-table-column prop="high" label="塔机高度" ></el-table-column>
        <el-table-column prop="place" label="小车位置" ></el-table-column>
        <el-table-column prop="handAngle" label="大臂角度" ></el-table-column>
        <el-table-column prop="torque" label="力矩" ></el-table-column>
        <el-table-column prop="windVelocity" label="风速" ></el-table-column>
        <el-table-column prop="angle" label="塔机倾斜角度" ></el-table-column>
      </el-table>
    </el-col>
  </el-row>
</div>
</template>
<script>
import * as echarts from "echarts";

export default {
  name: "towerCraneshow",
  data() {
    return {
      permissionRelations: [
        // Add more data as needed
      ],

      anemometer: [
        {fensu:50,getTimes:'18:00'}
        // Add more data as needed
      ],
      option: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            progress: {
              show: true
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}'
            },
            data: [
              {
                value: 50,
                name: '风速'
              }
            ]
          }
        ]
      },


    }


  },
  mounted() {
    // 柱形图钩子函数
    const myChart = echarts.init(document.getElementById('biaoChar'));
    myChart.setOption(this.option);

  }
}
</script>

<style scoped>

</style>
